<!DOCTYPE html>
<html>
<head>



    <title>ATM后台管理系统</title>
</head>
<body class="bgf6">

<div th:include="common/boAtmHeader :: atmHeader"></div>

<div class="main-body pb100" >
    <div class="container pt10">
        <div class="dflx sbt">
            <div th:include="common/boAtmLeft :: atmLeft"></div>

            <div id="app" class="body-right">
                <div class="bread-nav bgff">
                    <ul class="dflx">

                    </ul>
                </div>

                <div class="bgff mt10 pb20 edit-mode">
                    <div class="wrap">

                        <div class="box">
                            <div class="box-title"><span>角色和权限管理</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title"><i class="cred">*</i>角色 </span>
                                    <div class="content">
                                        <el-select v-model="selRoleId" placeholder="请选择">
                                            <el-option
                                                    v-for="item in roles"
                                                    :label="item.roleValue"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    &nbsp; &nbsp;
                                    <el-button type="primary" plain v-on:click="loadRolePermission">查询权限</el-button>

                                </div>



                                <div class="two">
                                    <span class="title">菜单 </span>
                                    <div class="content">
                                        <el-tree
                                                :data="menus"
                                                show-checkbox
                                                default-expand-all
                                                node-key="menuId"
                                                ref="tree"
                                                highlight-current
                                                :default-checked-keys="selMenuIds"
                                                :props="defaultProps">
                                        </el-tree>
                                    </div>
                                </div>

                                <div class="two">
                                    <span class="title">功能 </span>
                                    <div class="content">
                                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                        <div style="margin: 15px 0;"></div>
                                        <el-checkbox-group v-model="selUnMenuIds" @change="handleCheckedCitiesChange">
                                            <el-checkbox v-for="unMenu in unMenus" :label="unMenu.menuId" >{{unMenu.menuValue}}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </div>


                            </div>
                        </div>



                        <div class="tc mt40">

                            <button onclick="rolePerimissionAllocation()" type="button" class="btn btn-primary f12"> 绑定 </button>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/foundation-datepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/foundation-datepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/bootstrap-table.min.js"></script>
<script src="/js/jquery.bs-table.js"></script>

<script src="/js/vue.js"></script>
<script src="/js/ele.js"></script>
<script src="/js/dayuanit.js"></script>

<script type="text/javascript">

    var boAtm = new Vue({
        el : '#app',
        data : {
            roles : [],
            selRoleId : '',
            menus : [],
            unMenus : [],
            defaultProps: {
                children: 'childs',
                label: 'menuValue'
            },
            selMenuIds : [],
            selUnMenuIds : [],
            checkAll: false,
            isIndeterminate: true
        },
        created : function () {
            loadRoles();
            loadMenu();
            loadUnMenu();
        },
        methods : {
            handleCheckAllChange : function (val) {
                let allUnMenus = [];

                if (val) {
                    for (let i=0; i<this.unMenus.length; i++) {
                        allUnMenus.push(this.unMenus[i].menuId);
                    }
                }
                this.selUnMenuIds = allUnMenus;
                this.isIndeterminate = false;
            },

            handleCheckedCitiesChange : function (value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.unMenus.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.unMenus.length;
            },
            loadRolePermission : function () {
                queryRolePermission();
            }
        }
    })


    function queryRolePermission() {
        dayuanit.ajax('/user/queryUserPermission', {
            roleId : boAtm.selRoleId
        }, function (result) {
            var permissions = result.data;
            var unMenuIds = [];
            var menuIds = [];

            for (var i=0; i<permissions.length; i++) {
                if (permissions[i].menu == 1) {
                    menuIds.push(permissions[i].id);
                } else {
                    unMenuIds.push(permissions[i].id);
                }
            }

            boAtm.selUnMenuIds = unMenuIds;
            boAtm.selMenuIds = menuIds;
        })
    }

    function rolePerimissionAllocation() {
        alert(boAtm.$refs.tree.getCheckedKeys());//有缺陷 如果二级目录木有全选，则一级目录ID不会带过来
        let selMenuIds = [];//创建一个已选中的目录ID数组

        let selMemuNodes = boAtm.$refs.tree.getCheckedNodes();
        for (let i=0; i<selMemuNodes.length; i++) {
            let menuNode = selMemuNodes[i];
            console.log(menuNode);

            selMenuIds.push(menuNode.menuId);
            if (menuNode.parentId != 0) {
                selMenuIds.push(menuNode.parentId)
            }
        }

        dayuanit.ajax('/user/rolePerimissionAllocation', {
            roleId : boAtm.selRoleId,
            menuIds : selMenuIds,
            unMenuIds : boAtm.selUnMenuIds
        }, function (result) {
            alert('绑定成功');
        })
    }

    function loadUnMenu() {
        dayuanit.ajax('/user/loadUnMenu', {}, function (result) {
            boAtm.unMenus = result.data;
        })
    }

    function loadMenu() {
        dayuanit.ajax('/user/loadMenu', {}, function (result) {
            boAtm.menus = result.data;
        })
    }

    function loadRoles() {
        dayuanit.ajax('/user/loadRoles', {}, function (result) {
            boAtm.roles = result.data;
        })
    }

    function createRolePerimission() {
        dayuanit.ajax('/user/userRoleAllocation', {

        }, function (result) {
            alert('角色和权限绑定成功');
        })
    }
</script>

</body>
</html>
